<template>
  <view class="change-phone">
    <form>
      <view class="nick">
        <text>更换手机号</text>
      </view>
      <view class="content">
        <view class="name_nodes">
          请发送验证码至
        </view>
        <view class="name_nodes1">
          {{phone}}
        </view>
        <view class="name_input" :class="{active: isAct}">
          <view class="inpt">
            <input type="number" placeholder="请输入验证码" v-model="code" name="code">
          </view>
          <view class="line1">
            <span v-if="!timer" @click="ObtainCodeClick">获取验证码</span>
            <span v-else>重发{{count}}s</span>
          </view>
        </view>
        <view class="line"></view>
        <view class="uni-padding-wrap uni-common-mt">
          <button type="primary" @click="validFormData">下一步</button>
        </view>
        <view class="service">
          若手机无法收到验证码,请
          <text>联系客服</text>
        </view>
      </view>
    </form>
    
  </view>
</template>

<script>
import { ShortMessageSendCode, UpdateMobile, PersonalCenter, checkOldPhoneByCodeApi } from '@/service/user/user.service.js'
import { multiDistrict } from '@/unit/common.js'
import graceChecker  from '@/unit/graceChecker.js'
export default{
  data(){
    return{
      phone:'',//手机号
      InputCode:'',//验证码
      isAct: false,
      count: 60,
      timer: null,
      code: '',
    }
  },
  onShow () {
    this.getUserInfo();
  },
  methods:{
    validFormData () {
      //将下列代码加入到对应的检查位置
      //定义表单规则
      var rule = [
        {name:"code", checkType : "notnull", checkRule: "",  errorMsg: "请输入验证码"},
        {name:"code", checkType : "int", checkRule: "5,5",  errorMsg:"请输入正确的6位验证码"}
      ];
      //进行表单检查
      var checkRes = graceChecker.check({
        'code': this.code
      }, rule);
      if (checkRes) {
        checkOldPhoneByCodeApi({
          mobile: this.phone,
          code: this.code
        }, res => {
          if (res.status == 0) {
            this.nextStep ();
          }
        }, null, { showErrorMsg: true });
        // this.nextStep ()
      } else {
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    },
    // 获取手机号
    getUserInfo () {
      PersonalCenter({
        userId:this.userId
      }, (res) => {
        if (res.status == 0) {
          this.phone = res.data.mobile
        }
      })
    },
    //获取验证码
    ObtainCodeClick () {
      ShortMessageSendCode({
        mobile : this.phone,
        type : 6,
      },(res) => {
        if (res.status == 0) {
          this.countDown();
          uni.showToast({
            title:'验证码发送成功',
            icon:'none',
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    nextStep () {
      uni.navigateTo({
        url:'/pages/user/BindNewPhone'
      })
    },
    countDown () { // 倒计时
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
  }
}
</script>

<style scoped>
  .change-phone {
    height: 100vh;
    background-color: #FFFFFF;
  }
  .nick{
    width: 100%;
    height: 215rpx;
    background:#FFF;
    
  }
  .nick text{
   display:block;
   font-size:36rpx;
   font-family:PingFang SC;
   font-weight:bold;
   color:rgba(51,51,51,1);
   padding:151rpx 0 0 102rpx;
  }
  .content{
    width: 100%;
    /* height: 976rpx; */
    background: #FFF;
    /* margin-top:20rpx; */
  }
  .name_nodes{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    padding:30rpx 0 0 105rpx;
  }
  .name_nodes1{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    padding:5rpx 0 0 105rpx;
  }
  .name_input{
    margin:40rpx 0 0 107rpx;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
  }
  .name_input input{
    display: inline-block;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  .line1{
    float:right;
    margin-top:-30rpx;
    margin-right:91rpx;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .line{
    width:564rpx;
    height:2rpx;
    margin:26rpx auto 111rpx;
    background:rgba(225,225,225,1);
  }
  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 568rpx;
    height: 70rpx;
    background: #434343;
    font-size:30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin:0 auto;
  }
  .uni-common-mt{
    width: 100%;
  }
  .service{
    font-size:22rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    text-align: center;
    margin-top:38rpx;
  }
  .service text{
    color:#CBB98D;
  }
</style>
